<template>
  <div>
    <vue-tinymce
        v-model="content"
        :setting="setting"
    />

  </div>
</template>

<script>
/**
 * Tinymce 使用详情
 * https://github.com/lpreterite/vue-tinymce-example/tree/master/vue
 */

import Vue from 'vue'
import Axios from "axios";
import Tinymce from 'tinymce'
import VueTinymce from '@packy-tang/vue-tinymce'

//样式
import 'tinymce/skins/content/default/content.min.css'
import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/skins/ui/oxide/content.min.css'

//主题
import 'tinymce/themes/silver'

//插件
import 'tinymce/plugins/link' //链接插件
import 'tinymce/plugins/image' //图片插件
// import 'tinymce/plugins/media' //媒体插件
import 'tinymce/plugins/table' //表格插件
import 'tinymce/plugins/lists' //列表插件
import 'tinymce/plugins/quickbars' //快速栏插件
import 'tinymce/plugins/fullscreen' //全屏插件
import 'tinymce/plugins/preview' //预览

/**
 * 注：
 * 5.3.x版本需要额外引进图标，没有所有按钮就会显示not found
 */
import 'tinymce/icons/default/icons'

//本地化
import '@/assets/js/tinymce/langs/zh_CN.js'

Vue.prototype.$tinymce = Tinymce
Vue.use(VueTinymce)

export default {
  name: 'Tinymce',
  props: {
    content: String
  },
  data () {
    return {
      //content: '', // 由父组件传值
      setting: {
        menubar: false,
        toolbar: "undo redo | fullscreen preview | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image table lists fullscreen quickbars preview",
        language: 'zh_CN',
        // width: '70em',
        height: '34em',
        branding: false,
        // images_upload_url: Axios.defaults.baseURL + 'uploads'
        images_upload_handler: function (blobInfo, success, failure, progress) {
          let xhr, formData, user;
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open('POST', Axios.defaults.baseURL + 'uploads');
          if (localStorage.getItem('user')) {
            user = JSON.parse(localStorage.getItem('user'))
          }
          xhr.setRequestHeader("Authorization", user.api_token);
          xhr.setRequestHeader("UserId", user.id);

          xhr.upload.onprogress = function(e){
            progress(e.loaded / e.total * 100);
          }

          xhr.onload = function() {
            var json;
            if (xhr.status == 400) {
              failure('HTTP Error: ' + xhr.status, { remove: true });
              return;
            }
            if (xhr.status == 300) {
              failure('HTTP Error: ' + xhr.msg);
              return;
            }
            json = JSON.parse(xhr.responseText);
            /*if (!json || typeof json.location != 'string') {
              failure('Invalid JSON: ' + xhr.responseText);
              return;
            }*/
            success(json.data);
          };

          xhr.onerror = function () {
            failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
          }

          formData = new FormData();
          formData.append('file', blobInfo.blob(), blobInfo.filename());

          xhr.send(formData);
        }
      }
    }
  },
  watch: {
    content: function () {
      this.$emit('watchContent', this.content)
    }
  },
  mounted () {
    // this.content = this.detail.body
  }
}
</script>

<style>
/*编辑器居中*/
.tox-tinymce {
  margin:0 auto
}
</style>